<template>
    <div>

        <el-card shadow="always">
            <!-- //按钮 -->
            <el-row>
                <el-button @click="addInfo" type="primary" icon="el-icon-plus" circle size="mini"></el-button>
                <el-tooltip class="item" effect="dark" content="绑定编辑" placement="top-start">
                    <el-button @click="bindEditor" type="warning" icon="el-icon-edit" circle size="mini"></el-button>
                </el-tooltip>
                <el-button @click="deleteChecked" type="danger" icon="el-icon-delete" circle size="mini"
                    style="margin-right:10px;">
                </el-button>
                <!-- //搜索框 -->
                <el-cascader placeholder="请选择类别" class="cateSelect" size="small" expandTrigger="hover"
                    :options="categories" v-model="pageInfo.cateValue" @change="handleChangeCategory" :props="props"
                    clearable change-on-select>
                </el-cascader>
                <el-input v-model="value" size="mini" style="width:20%;margin-right:10px" placeholder="请输入用户名">
                </el-input>
                <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="value" size="mini"
                    style="width:20%;margin-right:10px">
                </el-input>
                <el-select v-model="value" size="mini" placeholder="请选择" style="margin-right:10px">
                    <el-option :value="value">
                    </el-option>
                </el-select>
            </el-row>
            <!-- //表格   @selection-change="handleSelectionChange" -->
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                v-loading="loading" element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="推荐" width="width">
                    <template slot-scope="{row,$index}">
                        <svg v-if="row.isTop == 1 ? true : false" @click="collectRow(row)" t="1655723680431"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="2178" width="16" height="16">
                            <path
                                d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428zM512 151.510204c-21.420408 0-40.228571 11.493878-50.155102 30.82449L398.628571 310.857143c-14.106122 28.734694-41.795918 48.587755-73.142857 53.289796l-141.583673 20.37551c-21.420408 3.134694-38.138776 17.240816-44.930612 38.138775-6.791837 20.37551-1.567347 41.795918 14.106122 56.946939L255.477551 579.918367c22.987755 22.465306 33.436735 54.857143 28.212245 86.204082l-24.032653 141.061224c-3.657143 21.420408 4.702041 41.795918 21.942857 54.334694 17.763265 12.538776 39.706122 14.106122 58.514286 4.179592L466.546939 799.346939c28.212245-15.15102 62.171429-15.15102 90.906122 0l126.955102 66.873469c19.330612 9.926531 41.273469 8.359184 58.514286-4.179592 17.763265-12.538776 25.6-32.914286 21.942857-54.334694l-24.032653-141.061224c-5.22449-31.869388 5.22449-63.738776 28.212245-86.204082L871.444898 480.653061c15.673469-15.15102 20.897959-36.571429 14.106122-56.946939-6.791837-20.37551-23.510204-35.004082-44.930612-38.138775l-141.583673-20.37551c-31.869388-4.702041-59.036735-24.555102-73.142857-53.289796l-63.216327-128.522449c-10.44898-20.37551-29.257143-31.869388-50.677551-31.869388z m-35.526531 666.122449z"
                                p-id="2179"></path>
                        </svg>
                        <svg v-else @click="collectRow(row)" t="1655723696925" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2381" width="16" height="16">
                            <path
                                d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z"
                                fill="#F2CB51" p-id="2382"></path>
                        </svg>
                    </template>
                </el-table-column>
                <el-table-column prop="isTop" label="置顶" width="width">
                    <template slot-scope="{row,$index}">
                        <div v-show="row.isTop == 0 ? true : false">
                            <svg ref="top1" v-if="row.roofPlacement == 0 ? true : false" @click="rootPlace(row)"
                                t="1655723830989" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4024" width="16" height="16">
                                <path
                                    d="M876.8 572.586667l-218.88-213.333334c-5.12-5.12-11.52-8.533333-17.92-11.52V128h42.666667c23.466667 0 42.666667-19.2 42.666666-42.666667s-19.2-42.666667-42.666666-42.666666H341.76c-23.466667 0-42.666667 19.2-42.666667 42.666666s19.2 42.666667 42.666667 42.666667h42.666667v219.733333c-6.4 2.986667-12.373333 6.826667-17.92 11.946667l-218.88 213.333333c-18.773333 18.346667-24.32 45.653333-14.506667 69.973334s33.28 39.68 59.306667 39.68H469.333333v256c0 23.466667 19.2 42.666667 42.666667 42.666666s42.666667-19.2 42.666667-42.666666v-256h277.333333c26.026667 0 49.493333-15.786667 59.306667-40.106667 9.813333-23.893333 4.266667-51.626667-14.506667-69.973333zM554.666667 128v213.333333h-84.906667V128H554.666667zM244.906667 597.333333l175.36-170.666666h184.32l175.36 170.666666H244.906667z"
                                    p-id="4025" fill="#333333"></path>
                            </svg>
                            <svg ref="top2" v-else @click="rootPlace(row)" t="1655723868817" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5123"
                                data-spm-anchor-id="a313x.7781069.0.i11" width="16" height="16">
                                <path
                                    d="M320.32 704.18c14.058 14.06 14.058 36.854 0 50.913L125.864 949.547c-14.06 14.059-36.853 14.059-50.912 0-14.059-14.059-14.059-36.853 0-50.912l194.454-194.454c14.06-14.059 36.853-14.059 50.912 0z m629.906-396.904c14.818 14.818 13.897 39.112-2 52.766L717.082 558.556l0.667 2.734c27.425 114.91-4.257 237.542-87.885 325.02l-2.745 2.84-2.725 2.759c-14.036 14.195-36.941 14.26-51.057 0.144L126.447 445.162c-14.06-14.059-14.06-36.853 0-50.912 90.247-90.248 220.23-123.274 340.164-91.125l2.991 0.82 195.22-227.306c13.517-15.74 37.463-16.8 52.322-2.445z m-78.374 23.45L694.138 153.011 508.752 368.87a36 36 0 0 1-38.937 10.616l-3.106-1.086c-88.26-30.386-185.781-14.902-260.063 41.255l-2.2 1.682 392.717 392.718 0.874-1.132c54.977-71.991 71.575-166.167 44.804-252.737l-1.07-3.393a36 36 0 0 1 10.96-37.877l219.12-188.19z"
                                    p-id="5124" fill="#1296db"></path>
                            </svg>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" width="200">
                </el-table-column>
                <el-table-column prop="uAuthor.userName" label="作者" width="120">
                </el-table-column>
                <el-table-column prop="date" label="更新时间" width="120">
                </el-table-column>
                <el-table-column prop="address" label="类别" width="width">
                    <template slot-scope="{row,$index}">
                        <span v-for="item, in row.categories" :key="item.id">{{ item.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="tags" label="标签" width="width">
                    <template slot-scope="{row,$index}">
                        <span v-for="item, in row.tags" :key="item.id">{{ item.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="clickNum" label="点击" width="width">
                </el-table-column>
                <el-table-column prop="commentNum" label="评论数" width="width">
                </el-table-column>
                <el-table-column prop="state" label="状态" width="width">
                    <template slot-scope="{row,$index}">
                        <svg v-show="!row.state" t="1655274652232" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3146" width="16" height="16">
                            <path
                                d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z"
                                fill="#1afa29" p-id="3147"></path>
                        </svg>
                        <svg v-show="row.state" t="1655274769525" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="12617" width="16" height="16">
                            <path
                                d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM768 576 256 576C217.6 576 192 550.4 192 512c0-38.4 25.6-64 64-64l512 0c38.4 0 64 25.6 64 64C832 550.4 806.4 576 768 576z"
                                p-id="12618" fill="#d81e06"></path>
                        </svg>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template slot-scope="{row,$index}">
                        <el-button @click="fixRow(row)" type="primary" icon="el-icon-edit" circle size="mini">
                        </el-button>
                        <el-button @click="deleteOne(row)" type="warning" icon="el-icon-delete" circle size="mini">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- //分页器 -->
            <div style="display:table;margin:0 auto;margin-top:10px">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="pageInfo.current" :page-sizes="[2, 5, 8]" :page-size="pageInfo.pageSize"
                    layout="total,sizes, prev, pager, next" :total="pageInfo.totalItems"></el-pagination>
            </div>
        </el-card>
        <!-- //对话框 -->
        <el-dialog :visible.sync="dialogVisible" width="90%">
            <ul style="display:flex;list-style: none;">
                <li style="flex:2;margin-right: 10px;">
                    <el-card class="box-card">
                        <el-form :model="form" ref="rulerForm" :rules="rules" label-width="80px" :inline="false"
                            size="normal">
                            <el-form-item label="标题" prop="title">
                                <el-input v-model="form.title"></el-input>
                            </el-form-item>
                            <el-form-item label="摘要" prop="discription">
                                <el-input v-model="form.discription"></el-input>
                            </el-form-item>
                            <el-form-item label="导入">
                                <el-upload class="upload-demo"
                                    action="http://127.0.0.1:8080/api/content/getWordHtmlContent"
                                    :on-change="handleChangeWord" :file-list="fileList">
                                    <el-button size="small" type="primary">上传word文档</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <!-- //富文本框 -->
                    <el-card shadow="always" :body-style="{ padding: '20px' }">
                        <quill-editor v-model="form.comments" style="width:100%;height:500px;"></quill-editor>
                    </el-card>
                </li>
                <li style="flex:1">
                    <el-card class="box-card">
                        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false"
                            size="normal">
                            <el-form-item label="状态">
                                <el-select v-model="form.state">
                                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="駁回原因" size="normal" v-show="form.state == 3 ? true : false">
                                <el-input v-model="form.dismissReason"></el-input>
                            </el-form-item>
                            <el-form-item label="类别" prop="categories">
                                <el-cascader :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }"
                                    v-model="form.categories" :options="categories" @change="handleChange">
                                </el-cascader>
                            </el-form-item>
                            <el-form-item label="来源">
                                <el-input v-model="form.source"></el-input>
                            </el-form-item>
                            <el-form-item label="关键字">
                                <el-input v-model="form.keywords"></el-input>
                            </el-form-item>
                            <el-form-item label="标签" prop="tags">
                                <el-select v-model="form.tags" multiple filterable allow-create default-first-option
                                    placeholder="请选择文章标签">
                                    <el-option v-for="item in tagsOption" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="缩略图">
                                <el-radio v-model="radio" label="1">上传</el-radio>
                                <el-radio v-model="radio" label="2">自动生成</el-radio>
                                <!-- //上传 -->
                                <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/api/upload/files"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="form.sImg" :src="form.sImg" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <!-- //自动生成 -->
                            <div>
                                <el-form-item label="封面">
                                </el-form-item>
                                <el-form-item label="标题">
                                    <el-input v-model="form.value"></el-input>
                                </el-form-item>
                                <el-form-item label="预览">
                                </el-form-item>
                            </div>
                        </el-form>

                    </el-card>
                </li>
            </ul>
            <el-button v-if="type == 1" type="primary" @click="submitForm('rulerForm')">保存</el-button>
            <el-button v-else type="primary" @click="submitForm('rulerForm')">更新</el-button>
            <el-button @click="dialogVisible = false">返回</el-button>
        </el-dialog>
        <!-- //绑定编辑 -->
        <el-dialog title="绑定编辑" :visible.sync="dialogVisibleBind" width="30%">
            <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <p class="notice-tip">
                    在添加文档之前，您需要绑定一个默认编辑
                    <span>
                        （当前编辑：
                        <span style="color:red;font-weight:bold">{{ targetName }}</span>）
                    </span>
                </p>
                <el-form-item label="绑定编辑">
                    <el-select @change="handleSelect" v-model="value" filterable remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                        <el-option v-for="item in options" :key="item.id" :label="item.userName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="saveBind" type="primary">绑定</el-button>
                    <!-- @click="onSubmit" -->
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import { renderTreeData, } from '@/utils/auth'
import { quillEditor } from 'vue-quill-editor'
import {
    reqGetList, reqTopConten, reqGetListAgain, reqRoofContent, reqRegUser, reqUserSession, 
    reqAddOne, reqGetListTags, reqCategory, reqDeleteContent, reqUpdateOne, reqContentEdit, reqEditor, reqGetPage
} from '@/api/content'
export default {
    name: '',
    components: {
        quillEditor
    },
    data() {
        return {

            //遠程
            type: '',
            options: [],
            value: [],
            list: [],
            loading: false,
            states: [],
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisibleBind: false,
            dialogVisibleMove: false,
            dialogVisibleRecycle: false,
            scene: 0,
            value: '',
            tableData: [{
                title: '',
                state: "1",
                clickNum: '',
                commentNum: '',
                date: '',
                name: '',
                isTop: ''
            }],
            multipleSelection: [],
            pageInfo: {
                totalItems: 0,
                pageSize: 10,
                current: 1,
                searchkey: '',
                totalPage: '',
                //分类选择框
                cateValue: '',
            },
            fileList: [],
            form: {
                title: "",
                discription: "",
                comments: "",
                source: "",
                keywords: "",
                tags: [],
                author: {},
                categories: [],
                dismissReason: '',
                clickNum: 0,
                commentNum: 0,
                cover: "NLRi1XfS",
                isTop: 0,
                likeNum: 0,
                markDownComments: "",
                roofPlacement: "0",
                sImg: "",
                sImgType: "2",
                simpleComments: "33333\n",
                sortPath: "",
                state: "",
                stitle: "",
                targetUser: "",
                type: "1",
                uAuthor: "",
                // value: '',
                id: '',
                imageArr: [],
                appShowType: '',
                author: '',
                date: '',
                draft: '',
                duration: '',
                updateDate: '',
                url: "",
                videoArr: [],
                videoImg: "",
                __v: 0,
                _id: " ",

            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                discription: [
                    { required: true, message: '前输入摘要', trigger: 'blur' }
                ],
                categories: [
                    { required: true, message: '请选择类别', trigger: 'change' }
                ],
                tags: [
                    { required: true, message: '请选择标签', trigger: 'change' }
                ],

            },
            options: [],
            radio: '',
            tagsOption: [],
            stateOptions: [
                {
                    label: '退回',
                    value: '退回'
                },
                {
                    label: '待審核',
                    value: '待審核'
                },
                {
                    label: '審核通過',
                    value: '審核通過'
                },
                {
                    label: '審核不通過',
                    value: '審核不通過'
                }
            ],
            categories: [],
            props: {
                label: 'name',
                value: 'id',
                children: "children"
            },
            docsRecycle: [],
            input2: '',
            val: '',
            targetUser: "",
            targetName: '',
            item: '',
            inputData: []
        }
    },
    mounted() {
        //挂载数据
        this.getList()
        //標籤
        this.getListTags()
        //分類
        this.getCategories()
        //回收箱
        this.getListCycle()
        //獲取綁定編輯信息
        this.getUserSession()
    },
    methods: {
        //獲取綁定編輯信息
        async getUserSession() {
            let result = await reqUserSession()
            this.targetName = result.data.userInfo.targetEditor.userName
        },
        //表格數據
        async getList() {
            let result = await reqGetList()
            this.tableData = result.data.docs
            this.pageInfo = result.data.pageInfo
            result.data.docs.forEach((item) => {
                this.form.targetUser = item.author._id
            })

        },
        //標籤數據 
        async getListTags() {
            let result = await reqGetListTags({ pageSize: 200 })
            this.tagsOption = result.data.docs
        },
        //点亮收藏
        async collectRow(row) {
            this.scene = row.isTop == 1 ? '1' : '0'
            var top = row.isTop == 0 ? '1' : '0'
            await reqTopConten({ isTop: top, _id: row.id })
            console.log(row.id);
            // const { totalItems, pageSize, current, searchkey, totalPage } = this.pageInfo
            // await reqGetListAgain({ totalItems, pageSize, current, searchkey, totalPage })
            // const obj= Object.assign(this.tableData,result.data.docs)
            // console.log(obj);
            //  if( row.isTop == 0){
            //     this.$refs.top1.style.display= 'none'
            //     this.$refs.top2.style.display= 'none'
            // }else   
            //挂载数据
            this.getList()
        },
        //置顶
        async rootPlace(row) {
            var roof = row.roofPlacement == '0' ? '1' : '0'
            await reqRoofContent({ roofPlacement: roof, _id: row.id })
            const { totalItems, pageSize, current, searchkey, totalPage } = this.pageInfo
            await reqGetListAgain({ totalItems, pageSize, current, searchkey, totalPage })
            //挂载数据
            this.getList()
        },
        //分類
        async getCategories() {
            let result = await reqCategory()
            this.categories = renderTreeData(result.data)
            console.log(this.categories);
        },
        //收集category
        handleChange(value) {
            this.form.categories = value
            console.log(value);
        },
        // 收集上傳文件
        handleChangeWord(file, fileList) {
            console.log(file);
            this.markDownComments = file.response.data
            this.fileList = fileList.slice(-3);
        },
        //添加信息
        addInfo() {
            this.type = 1
            this.dialogVisible = true
        },
        //提交
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.type == 1) {
                        const { title, discription, comments, source, keywords, tags, author, categories, dismissReason, clickNum,
                            commentNum, cover, isTop, likeNum, markDownComments, roofPlacement, sImg, sImgType,
                            simpleComments, sortPath, state, stitle, targetUser, type, uAuthor, value } = this.form
                        let result = await reqAddOne({
                            title, discription, comments, source, keywords, tags, author, categories, dismissReason, clickNum,
                            commentNum, cover, isTop, likeNum, markDownComments, roofPlacement, sImg, sImgType,
                            simpleComments, sortPath, state, stitle, targetUser, type, uAuthor, value
                        })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '上傳成功' })
                            this.dialogVisible = false
                            //挂载数据
                            this.getList()
                        }
                    } else {
                        const { appShowType, author, categories, clickNum, commentNum, comments, cover, date, discription, dismissReason,
                            draft, duration, id, imageArr, isTop, keywords, likeNum, markDownComments, roofPlacement, sImg, sImgType, simpleComments, sortPath,
                            source, state, stitle, tags, targetUser, title, type, uAuthor, updateDate, url, videoArr, videoImg, __v, _id } = this.form
                        let result = await reqUpdateOne({
                            appShowType, author, categories, clickNum, commentNum, comments, cover, date, discription, dismissReason,
                            draft, duration, id, imageArr, isTop, keywords, likeNum, markDownComments, roofPlacement, sImg, sImgType, simpleComments, sortPath,
                            source, state, stitle, tags, targetUser, title, type, uAuthor, updateDate, url, videoArr, videoImg, __v, _id
                        })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '更新成功' })
                            this.dialogVisible = false
                            //挂载数据
                            this.getList()
                        }
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //绑定编辑
        bindEditor() {
            this.dialogVisibleBind = true
        },
        //批量移动
        fileMove() {
            this.dialogVisibleMove = true
        },
        //回收箱
        async getListCycle() {
            let result = await reqGetListAgain({ draft: 1 })
            this.docsRecycle = result.data.docs
        },
        //回收站
        recycleStation() {
            this.dialogVisibleRecycle = true
        },
        //上传
        // handleChange(file, fileList) {
        //     this.fileList = fileList.slice(-3);
        // },
        // handleRemove(file) {
        //     console.log(file);
        // },
        handleAvatarSuccess(res, file) {
            this.form.sImg = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //選擇框
        handleSelectionChange(val) {
            val.forEach((item) => {
                if (this.multipleSelection.indexOf(item._id) == -1) {
                    this.multipleSelection.push(item._id)
                }
            })
            console.log(this.multipleSelection);
        },
        // 刪除
        deleteChecked() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                var multi = this.multipleSelection.toString()
                let result = await reqDeleteContent({ ids: multi, draft: 1 })
                if (result.status == 200) {
                    this.$message({ type: 'success', message: '刪除成功' })
                }
                //挂载数据
                this.getList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //修改
        async fixRow(row) {
            console.log(row);
            this.dialogVisible = true
            this.type = 2
            await reqContentEdit({ id: row.id })
            // this.form = { ...result.data }
            this.form.title = row.title,
                this.form.discription = row.discription,
                this.form.comments = row.comments,
                this.form.source = row.source,
                this.form.keywords = row.keywords.toString(),
                this.form.tags = row.tags,
                this.form.author = row.author,
                this.form.categories = row.categories,
                this.form.dismissReason = row.dismissReason,
                this.form.clickNum = row.clickNum,
                this.form.commentNum = row.commentNum,
                this.form.cover = row.cover,
                this.form.isTop = row.isTop,
                this.form.likeNum = row.likeNum,
                this.form.markDownComments = row.markDownComments,
                this.form.roofPlacement = row.roofPlacement,
                this.form.sImg = row.sImg,
                this.form.sImgType = row.sImgType,
                this.form.simpleComments = row.simpleComments,
                this.form.sortPath = row.sortPath,
                this.form.state = row.state,
                this.form.stitle = row.stitle,
                this.form.targetUser = row.author._id,
                this.form.type = row.type,
                this.form.uAuthor = row.uAuthor,
                this.form.value = row.value
            this.form.id = row.id
            this.form.appShowType = row.appShowType,
                this.form.author = row.author,
                this.form.date = row.date,
                this.form.draft = row.draft,
                this.form.duration = row.duration,
                this.form.updateDate = row.updateDate,
                this.form.url = row.url
            this.form.videoArr = row.videoArr,
                this.form.videoImg = row.videoImg,
                this.form.__v = row.__v,
                this.form._id = row._id
        },
        // 刪除one
        async deleteOne(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await reqDeleteContent({ ids: row.id, draft: 1 })
                //挂载数据
                this.getList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //分页
        async renderPageList(current = 1, pageSize = 10) {
            let searchkey = this.pageInfo ? this.pageInfo.searchkey : "";
            let state = this.pageInfo ? this.pageInfo.state : "";
            let user = this.pageInfo ? this.pageInfo.user : "";
            let targetCurrent = current;
            let result = await reqGetPage({
                current: targetCurrent,
                pageSize,
                searchkey
            });
            this.tableData = result.data.docs
            //ComponentPaginationEnd
            // //挂载数据
            // this.getList()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            let current = this.pageInfo ? this.pageInfo.current : 1;
            this.renderPageList(current, val);
            this.pageInfo.pageSize = val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let pageSize = this.pageInfo ? this.pageInfo.pageSize : 10;
            this.renderPageList(val, pageSize);
        },
        //遠程
        async remoteMethod(query) {
            let result = await reqRegUser({ searchkey: query })
            this.options = result.data.docs
            console.log(query);
        },
        handleSelect(item) {
            this.targetUser = item
            console.log(item);
        },
        async saveBind() {
            let result = await reqEditor({ ids: '', targetUser: this.targetUser })
            if (result.status == 200) {
                this.$message({ type: 'success', message: '绑定成功' })
                this.dialogVisibleBind = false
                //獲取綁定編輯信息
                this.getUserSession()
                //挂载数据
                this.getList()
            }
        },
        //搜索框
        async handleChangeCategory(val) {
            console.log(val);
            this.pageInfo.cateValue = val
            const { totalItems, pageSize, current, searchkey, totalPage, cateValue } = this.pageInfo
            let result = await reqGetListAgain({ totalItems, pageSize, current, searchkey, totalPage, categories:cateValue })
            this.tableData = result.data.docs
            console.log(this.tableData);
            //  this.pageInfo = result.data.pageInfo
        },
    },


}

</script>

<style scoped lang="scss">
.notice-tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 0 0 25px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.cateSelect {
    margin-right: 10px;
}
</style>